<!-- 值班管理 -->
<template>
  <div class="dd">
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="tel" label="人员编号" width="120"> </el-table-column>
        <el-table-column prop="tel" label="电话" width="180"> </el-table-column>
        <el-table-column prop="sex" label="性别" width="180">
          <template slot-scope="scope">
            {{ scope.row.sex == 0 ? "女" : "男" }}
          </template>
        </el-table-column>
        <el-table-column prop="isOnline" label="是否在线" width="180">
          <template slot-scope="scope">
            <span :class="scope.row.isOnline == 0 ? 'outline' : 'online'">
              {{ scope.row.isOnline == 0 ? "离线" : "在线" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="isyingji" label="是否应急人员" width="180">
          <template slot-scope="scope">
            <span :class="scope.row.isyingji == 0 ? '' : 'isyj'">
              {{ scope.row.isyingji == 0 ? "否" : "是" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="typeNow" label="当前状态">
          <template slot-scope="scope">
            <span :class="scope.row.typeNow == 0 ? 'isXian' : ''">
              {{
                scope.row.typeNow == 0
                  ? "空闲"
                  : scope.row.typeNow == 1
                  ? "工作中"
                  : "-"
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="hisG" label="历史值班">
          <el-button size="mini">查看</el-button>
        </el-table-column>
        <el-table-column prop="date" label="值班时间"> </el-table-column>
      </el-table>
      <!-- <MyPagenation
        :currentChange="handleCurrentChange"
        :sizeChange="handleSizeChange"
        :currentPageSync="pageInfo.page"
        :pageSize="pageInfo.size"
        :total="userList.data.total"
      ></MyPagenation> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "DutyManageme",
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          tel: "15332611283",
          sex: 0,
          isOnline: 0,
          isyingji: 0,
          typeNow: 1,
          hisG: 1,
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          tel: "15332611283",
          sex: 1,
          isOnline: 1,
          isyingji: 1,
          typeNow: 1,
          hisG: 1,
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          tel: "15332611283",
          sex: 1,
          isOnline: 1,
          isyingji: 1,
          typeNow: 1,
          hisG: 1,
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          tel: "15332611283",
          sex: 0,
          isOnline: 0,
          isyingji: 0,
          typeNow: 1,
          hisG: 1,
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          tel: "15332611283",
          sex: 1,
          isOnline: 1,
          isyingji: 1,
          typeNow: 1,
          hisG: 1,
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          tel: "15332611283",
          sex: 0,
          isOnline: 0,
          isyingji: 0,
          typeNow: 1,
          hisG: 1,
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          tel: "15332611283",
          sex: 1,
          isOnline: 1,
          isyingji: 1,
          typeNow: 0,
          hisG: 1,
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          tel: "15332611283",
          sex: 0,
          isOnline: 0,
          isyingji: 0,
          typeNow: 0,
          hisG: 1,
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          tel: "15332611283",
          sex: 1,
          isOnline: 1,
          isyingji: 1,
          typeNow: 2,
          hisG: 1,
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          tel: "15332611283",
          sex: 0,
          isOnline: 0,
          isyingji: 0,
          typeNow: 1,
          hisG: 1,
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          tel: "15332611283",
          sex: 1,
          isOnline: 1,
          isyingji: 1,
          typeNow: 0,
          hisG: 1,
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
@import "../../../assets/style/table.less";
.outline {
  color: #ff1818;
}
.online {
  color: #1eff00;
}
.isyj {
  color: #f2ff00;
}
.isXian {
  color: #00e7e7;
}
</style>